<template>
	<view style="padding-bottom: 50rpx;">
		<!-- <view class="" style="text-align: center;margin: 50rpx 0rpx;color: #ff0000;">
			关注公众号教程
		</view> -->
		<view class="column" v-for="(item,index) in urlDate" :key="index">
			<text class="">
				{{item.title}}
			</text>
			<image @click="previewImage(index)" style="margin: 0rpx auto;" :src="item.img" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				urlDate:[
					{
						title:"1.点击确认",
						img:"/static/index/course/1.png"
					},
					{
						title:"2.已确认后点击返回",
						img:"/static/index/course/2.png"
					},
					{
						title:"3.点击个人服务通知",
						img:"/static/index/course/3.png"
					},
					{
						title:"4.点击 任务：关注公众号",
						img:"/static/index/course/4.png"
					},
					{
						title:"5.长按二维码识别公众号",
						img:"/static/index/course/5.png"
					},
					{
						title:"6.点击关注公众号",
						img:"/static/index/course/6.png"
					},
					{
						title:"7.点击下载或打开APP文字",
						img:"/static/index/course/7.png"
					}
				]
			};
		},
		onShow() {
			
		},
		methods:{
			//预览轮播图
			previewImage(index){
				//uniapp预览轮播图
				let imgList =[]
				this.urlDate.forEach(item=>{
					imgList.push(item.img)
				})
				uni.previewImage({
					current:index, //预览图片的下标
					urls:imgList //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			}
		}
	}
</script>

<style lang="scss">
	.column{
		display: flex;
		justify-content:center;
		align-items: center;
		margin: 30rpx 0rpx;
		text{
			padding: 10rpx 0rpx;
			color: #F5222D;
		}
	}
	
	.btns {
		width: 100vw;
		position: fixed;
		z-index: 100;
		bottom: 10rpx;
	
		>view {
			width: 380upx;
			height: 120upx;
			background-color: #0079ff;;
			color: #FFFFFF;
			display: flex;
			margin: 0 auto;
			margin-bottom: 40upx;
			border-radius: 15upx;
			box-shadow: 0 10upx 24upx -10upx #0079ff;;
			;
	
			.icon {
				width: 120upx;
				height: 120upx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
	
			.text {
				display: flex;
				flex-direction: column;
				justify-content: center;
	
				view:nth-child(1) {
					font-size: 34upx;
				}
	
				view:nth-child(2) {
					font-size: 28upx;
				}
			}
	
			image {
				width: 50upx;
				height: 50upx;
			}
		}
	
		>view:nth-child(2) {
			margin-bottom: 0upx;
		}
	}
</style>
